<template>
  <div class='container'>
    <div class="app-container">
      <el-card shadow="always">
       <!-- 顶部搜索 -->
       <el-form :model="requestParameters" label-width="80px" ref="form">
         <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="8">
              <el-form-item label="关键字" prop="keyword">
                <el-input type="text" v-model="requestParameters.keyword"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-button class="fr" size="small" @click="clear">清除</el-button>
                <el-button style="margin-right:10px" class="fr" size="small" type="primary" @click="search">搜索</el-button>
              </el-form-item>
            </el-col>
         </el-row>
      </el-form>
      <!-- 数据记录 -->
      <el-alert
        :title="title"
        type="info"
        :closable="false"
        show-icon>
      </el-alert>
      <!-- 数据列表 -->
       <el-table
          :data="qusetionsList"
          style="width: 100%">
          <el-table-column
           align="center"
            prop="id"
            label="编号">
          </el-table-column>
          <el-table-column
            align="center"
            prop="questionType"
            label="题型">
           <template slot-scope="scope">
              <span  v-if="scope.row.questionType==1">单选</span>
              <span  v-if="scope.row.questionType==2">多选</span>
              <span  v-if="scope.row.questionType==3">简答</span>
           </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="题目编号"
            width="200px">
            <template slot-scope="scope">
              <a
                 style="color:#1890ff"
                 v-for="(item,index) in scope.row.questionIDs"
                 :key="index"
                 @click="handleNumber(item.id, scope.row)">{{item.number}}<br></a>
            </template>
          </el-table-column>
          <el-table-column
            prop="addTime"
            align="center"
            label="录入时间"
            width="150px">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalSeconds"
            label="答题时间(s)">
          </el-table-column>
          <el-table-column
            align="center"
            prop="accuracyRate"
            label="正确率(%)">
          </el-table-column>
          <el-table-column
            align="center"
            prop="userName"
            label="录入人">
          </el-table-column>
          <el-table-column
             align="center"
             label="操作">
            <template slot-scope="scope">
              <el-button size="mini" icon="el-icon-delete" circle @click="handleDelete(scope.row.id)" type="danger" plain></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="fr"
          background
          :current-page="requestParameters.page"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="requestParameters.pagesize"
          :page-sizes="[10, 20,30, 50]"
          layout=" prev, pager, next,sizes, jumper"
          :total="counts">
        </el-pagination>
      </el-card>
    </div>
    <!-- 预览试题弹窗 -->
    <!-- 单选 -->
    <Dialog ref="questions" :questionDatalist = "questionDatalist"></Dialog>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions.js'
import Dialog from './../components/questions-preview-11'
export default {
  name: 'questionsList',
  components: {
    Dialog
  },
  data () {
    return {
      requestParameters: {
        page: 1,
        pagesize: 20,
        keyword: '' // 关键字
      },
      title: '',
      counts: 1,
      qusetionsList: [],
      questionDatalist: {
        data: {}
      } // 预览题目的信息
    }
  },
  created () {
    this.getQuestionsList()
  },
  watch: {
    keyword () {
      this.qusetionsList = this.requestParameters.keyword ? this.qusetionsList.filter(item => item.name.includes(this.keyword)) : this.qusetionsList
    }
  },
  methods: {
    // 发送请求获取数据（题组列表）
    async getQuestionsList () {
      const result = await randoms(this.requestParameters)
      console.log(result)
      // 获取数据给questionsList
      this.qusetionsList = result.data.items
      this.counts = result.data.counts
      this.title = `共 ${this.counts} 条记录`
    },
    // 清除
    clear () {
      this.$refs.form.resetFields()
    },
    // 搜索
    search () {
      this.requestParameters.page = 1 // 初始化当前所在页数
      this.getQuestionsList(this.requestParameters)
    },
    // 数据列表删除
    handleDelete (user) {
      this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await removeRandoms({ id: user })
            .then(response => {
              this.$message.success('成功删除了用户' + '!')
              this.qusetionsList.splice(user, 1)
              this.getQuestionsList(this.requestParameters)
            })
            .catch(response => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 切换每页的条数
    handleSizeChange (pagesize) {
      this.requestParameters.pagesize = pagesize
      this.requestParameters.page = 1
      this.getQuestionsList(this.requestParameters)
    },
    // 切换页码
    handleCurrentChange (currentPage) {
      this.requestParameters.page = currentPage
      this.getQuestionsList()
    },
    // 点击题目编号出现弹窗
    async handleNumber (id, row) {
      this.$refs.questions.dialogTableV()
      const result = await detail({ id })
      this.questionDatalist = result
      console.log('questions', result)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-alert {
  margin: 10px 0;
}
</style>
